<template>
	<view class="details-staff">
		<!-- 头部 -->
		<!-- #ifndef MP-WEIXIN -->
		<public-header :title="title" :share="false"></public-header>
		<view class="hei_100"></view>
		 <!-- #endif -->
		<!-- end -->

		<!-- 简介 -->
		<view class="brief padd_32" v-if="detail.emp">
			<view class="intro clearfix">
				<image v-if="detail.emp" :src="detail.emp.portrait" mode="widthFix" class="fl"></image>
				<view class="fr top-body">
					<view class="name">
						{{detail.emp.name}}
						<staff-state v-show="state" :status="status"></staff-state>
						<view class="plan" @click="toPlan(detail.emp.id)">查看工作安排</view>
					</view>
					<view  style="min-height: 20rpx;margin-top: 30rpx;">
						<uni-rate v-if="detail.emp&&detail.emp.score>=0" active-color="#FCC800" max="5" is-fill="false" size="18" disabled="true" :value="detail.emp.score"></uni-rate>
					</view>
					<view class="dot">民族：{{detail.emp.nation}}</view>
					<view>籍贯：{{detail.emp.nativePlace}}</view>
					<view class="trait">
						<view class="lis">
							<view>{{detail.emp.age}}岁</view>
							<view class="tit">年龄</view>
						</view>
						<view class="lis">
							<view>{{detail.emp.workExperience}}年</view>
							<view class="tit">从业</view>
						</view>
						<view class="lis">
							<view>{{detail.emp.education}}</view>
							<view class="tit">学历</view>
						</view>
					</view>
				</view>
			</view>
			<view class="prices">
				<!-- <text v-for="(item, index) in detail.employeeBusinessMaps" :key="index">{{item.businessName}}</text> -->
				<view class="price" v-for="(item, index) in detail.employeeBusinessMaps" :key="index" @click="toOrder(item.businessId)">
					<view class="price-body">
						<view class="price-text1">
							{{item.businessName||''}}
						</view>
						<view class="price-text2">
							{{item.univalence||'-'}}{{item.univalenceUnit||''}}
						</view>
					</view>
				</view>
			</view>
			<view class="follow">
				有
				<text>{{detail.emp.focusNum}}</text>
				人正在关注{{detail.emp.name}}，如果您对{{detail.emp.name}}感兴趣，建议您尽快预约。
			</view>
		</view>
		<!-- end -->

		<!-- 详情 -->
		<view class="details padd_32" v-if="detail&&detail.emp">
			<view class="shop"><navigator url="">{{detail.emp.entName}}</navigator></view>
			<view class="title" v-show="detail.employeeCertificates.length != 0">技能证书</view>
			<view class="certif">
				<image v-for="(item, index) in detail.employeeCertificates" :key="'item'+index" :src="item.certificateUrl" mode="widthFix"></image>
			</view>
			<view class="title" v-show="detail.emp.introduction != null">自我介绍</view>
			<view class="notes"><text style="color: #999999;">员工简介：</text>{{detail.emp.introduction}}</view>
			<!-- <view class="notes"><text style="color: #999999;">自我介绍：</text>{{detail.emp.introduction}}</view> -->
			<view class="notes"><text style="color: #999999;">住家情况：</text>{{detail.emp.residence?'接受住家':'不接受住家'}}</view>
			<view class="notes"><text style="color: #999999;">接单范围：</text>{{detail.emp.serviceCity}}</view>
		</view>
		<!-- end -->

		<!-- 评价 -->
		<view class="comment padd_32" v-if="detail&&detail.appraises.length>0">
			<view class="xian-gray16"></view>
			<comment-list :list="detail.appraises"></comment-list>
			<navigator class="more" :url="'/pages/details/evaluate?type=员工&sid=' + detail.emp.id">查看全部评价》</navigator>
		</view>
		<!-- end -->

		<!-- nav -->
		<view class="hei-156"></view>
		<details-footer :staff="staff" :id='id' :nat='detail'></details-footer>
		<!-- end -->
	</view>
</template>

<script>
import PublicHeader from '@/components/PublicHeader.vue';
import DetailsFooter from '@/components/DetailsFooter.vue';
import UniRate from '@/components/uni-rate/uni-rate.vue';
import CommentList from '@/components/list/list-comment.vue';
import StaffState from '@/components/button/StaffState.vue';
import { mapState, mapMutations } from 'vuex';
import app from "@/App.vue"
export default {
	components: {
		PublicHeader,
		DetailsFooter,
		UniRate,
		CommentList,
		StaffState
	},
	computed: mapState(['hasLogin', 'uerInfo']),
	data() {
		return {
			sid: '',
			id: '',
			title: '员工详情',
			share: true,
			staff: true,
			state: true,
			status: 1,
			goods: [],
			detail:'',
			appraises: []
		};
	},
	onLoad(option){
		if (option && option.sid) {
			this.sid = option.sid
		} else if (app.globalData.query.sid) {
			this.sid = app.globalData.query.sid
		}
		if (option && option.id) {
			this.id = option.id
		}
		var _this = this
		_this.$http
			.post('/user/employee/detail',{
				employeeId:_this.sid,
				userId: _this.uerInfo.userId
			})
			.then(function(response) {
				console.log('个人信息', response);
				_this.detail = response.data
			})
			.catch(function(error) {
				console.log(error);
			});
	},
	// #ifdef MP-WEIXIN
	onShareAppMessage(res) {
		let _this = this
		 if (res.from === 'button') {// 来自页面内分享按钮
		   console.log(res.target)
		 }
		 console.log('分享数据',res)
		 // uni.showToast({
			// icon: 'none',
			// position: 'bottom',
			// title: '分享成功'
		 // })
		 return {
		   title: 'Bee到员工分享',
		   path: '/pages/details/details-staff?sid=' + _this.sid,
		   imageUrl: '/static/images/img_0.png'
		 }
	 },
	onShareTimeline(res) {
		let _this = this
		if (res.from === 'menu') {// 来自页面内分享按钮
		  console.log(res.target)
		}
		console.log('分享朋友圈进来的',res)
		uni.showToast({
					icon: 'none',
					position: 'bottom',
					title: '分享成功'
		})
		return {
		  title: 'Bee到员工分享',
		   path: '/pages/details/details-staff?sid=' + _this.sid,
		  imageUrl: '/static/images/img_0.png'
		}
	},
	  // #endif
	methods: {
		toOrder(id) {
			let table = []
			for (let i = 0; i < this.detail.employeeBusinessMaps.length; i++) {
				table.push({
					businessName: this.detail.employeeBusinessMaps[i].businessName,
					businessId: this.detail.employeeBusinessMaps[i].businessId,
					univalence: this.detail.employeeBusinessMaps[i].univalence,
					univalenceUnit: this.detail.employeeBusinessMaps[i].univalenceUnit,
					description: this.detail.employeeBusinessMaps[i].business.description,
					minPrice: this.detail.employeeBusinessMaps[i].business.minPrice,
					maxPrice: this.detail.employeeBusinessMaps[i].business.maxPrice,
					minCount: this.detail.employeeBusinessMaps[i].business.minCount,
				})
			}
			let query = {
				emp: this.detail.emp,
				employeeBusinessMaps: table,
			}
			uni.navigateTo({
			    url: '/pageageA/pages/order/details-staff?id=' + id + '&query=' + JSON.stringify(query)
			})
		},
		toPlan(id) {
			uni.navigateTo({
			    url: '/pageageA/pages/order/plan?id=' + id
			});
		},
		childByValue(e) {
			this.detail.emp.focused = e
		   }
	}
};
</script>

<style scoped lang="scss">
.prices {
	width: 100%;
	padding: 30rpx 0 30rpx 0;
	overflow-x: auto;
	display: flex;
	flex-wrap: nowrap;
	
}
.price {
	border-radius: 10rpx;
	min-width: 160rpx;
	height: 120rpx;
	margin: 0 8rpx;
	flex-shrink: 0;
	
	background: #FFFFFF;
	box-shadow: 0px 16rpx 36rpx 0px rgba(0, 0, 0, 0.04);
	border-radius: 2rpx;
	border: 1rpx solid #EBECED;
}
.price-body{
	padding: 20rpx;
	height: 80rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	
}
.price-text1{
	font-size: 24rpx;
	font-family: PingFangSC-Medium, PingFang SC;
	font-weight: 500;
	color: #666666;
	line-height: 33rpx;
}
.price-text2{
	font-size: 26rpx;
	font-family: PingFangSC-Medium, PingFang SC;
	font-weight: 500;
	color: #FF0000;
	line-height: 37rpx;
}
.brief {
	padding-bottom: 40rpx;
	border-bottom: 1rpx solid #dadada;
}
.top-body{
	width: 400rpx;
	overflow: hidden;
}
.intro {
	margin-bottom: 10rpx;
	overflow: hidden;
}
.intro image {
	width: 246rpx;
	height: 295rpx;
	margin-right: 26rpx;
}
.intro .fl {
	font-size: 28rpx;
	color: #666;
}
.intro .fl .name {
	color: #333333;
	font-size: 40rpx;
	font-weight: 500;
	margin-bottom: 20rpx;
}
.plan{
	font-size: 24rpx;
	float: right;
	padding: 6rpx;
	border-radius: 10rpx;
	border: 2rpx #cfcfcf solid;
}
.intro .dot {
	margin-top: 10rpx;
	margin-bottom: 4rpx;
}
.intro .trait {
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	margin-top: 28rpx;
	width: 390rpx;
}
.intro .trait .lis {
	font-size: 36rpx;
	line-height: 40rpx;
	color: #333;
}
.intro .trait .lis .tit {
	color: #999;
	font-size: 28rpx;
}
.label {
	margin-bottom: 30rpx;
}
.label text {
	display: inline-block;
	font-size: 24rpx;
	border-radius: 4px;
	line-height: 33rpx;
	border: 1px solid $uni-color1;
	color: $uni-color1;
	padding: 4rpx 14rpx;
	margin-top: 20rpx;
	margin-right: 16rpx;
}
.follow {
	background-color: #f5f7fb;
	border-radius: 10rpx;
	width: 100%;
	box-sizing: border-box;
	padding: 20rpx 30rpx;
	color: #666;
	font-size: 24rpx;
	line-height: 36rpx;
}
.follow text {
	padding: 0 8rpx;
	color: #3f8ad2;
}
.details .shop {
	font-size: 28rpx;
	font-weight: 500;
	color: #333;
	line-height: 40rpx;
	margin: 23rpx 0;
}
.details .title {
	height: 36rpx;
	line-height: 36rpx !important;
	font-size: 32rpx;
	color: #333;
	line-height: 45rpx;
	font-weight: 500;
	border-left: 6rpx solid $uni-color1;
	padding-left: 10rpx;
	margin-bottom: 24rpx;
	margin-top: 46rpx;
}
.details .certif {
	width: 100%;
	overflow-x: auto;
	display: flex;
	flex-wrap: nowrap;
}
.details .certif image {
	border-radius: 10px;
	width: 218rpx;
	margin: 0 8rpx;
	flex-shrink: 0;
}
.details .resume {
	font-size: 28rpx;
	line-height: 40rpx;
	color: #999;
	margin-bottom: 6rpx;
}
.details .resume text {
	color: #666;
}
.details .resume .price {
	color: #ff3428;
}
.details .notes {
	font-size: 28rpx;
	line-height: 40rpx;
	color: #666666;
	margin-bottom: 12rpx;
}
.comment .more {
	width: 100%;
	text-align: center;
	padding-top: 20rpx;
	font-size: 26rpx;
	color: #333;
}
.hei-156{
	height: 156rpx;
}
</style>
